<template>
  <div class="register-wrapper">
    <canvas ref="artCanvas" class="art-canvas"></canvas>
    <div class="register-container">
      <h2>用户注册</h2>
      <div class="form-group">
        <label for="username">用户名 <span class="required">*</span></label>
        <input
            type="text"
            id="username"
            v-model="username"
            placeholder="请输入用户名"
            @keyup.enter="handleRegister"
        />
      </div>
      <div class="form-group">
        <label for="password">密码 <span class="required">*</span></label>
        <input
            type="password"
            id="password"
            v-model="password"
            placeholder="请输入密码"
            @keyup.enter="handleRegister"
        />
      </div>
      <div class="form-group terms-group">
        <label>
          <input
              type="checkbox"
              v-model="agreeTerms"
          />
          我已阅读并同意
          <a href="/terms-of-service" target="_blank">用户条款</a>
        </label>
      </div>
      <div class="form-group terms-group">
        <label>
          <input
              type="checkbox"
              v-model="agreePrivacy"
          />
          我已阅读并同意
          <a href="/privacy-policy" target="_blank">隐私保护政策</a>
        </label>
      </div>
      <button class="register-btn" @click="handleRegister">注册</button>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Register',
  data() {
    return {
      username: '',
      password: '',
      agreeTerms: false,
      agreePrivacy: false,
      errorMessage: ''
    };
  },
/*  mounted() {
    const canvas = this.$refs.artCanvas;
    const ctx = canvas.getContext('2d');

    // 设置画布大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 绘制艺术字，与 Login.vue 一致
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = 'bold 80px "Arial", sans-serif';
    ctx.fillStyle = 'rgba(163, 217, 163, 0.3)';
/!*    ctx.fillText('招聘实验室🧪', canvas.width / 2, canvas.height / 2 - 30);*!/
    ctx.font = 'italic 60px "Arial", sans-serif';
    ctx.fillStyle = 'rgba(102, 187, 106, 0.3)';
    ctx.fillText('Joblab', canvas.width / 2, canvas.height / 2 + 30);
  },*/
  methods: {
    async handleRegister() {
      // 前端验证
      if (!this.username || !this.password) {
        this.errorMessage = '用户名和密码不能为空';
        return;
      }
      if (!this.agreeTerms || !this.agreePrivacy) {
        this.errorMessage = '请同意用户条款和隐私保护政策';
        return;
      }
      this.errorMessage = '';

      // 仅发送用户名和密码到后端
      try {
        const response = await axios.post('http://localhost:8080/user/register', {
          username: this.username,
          password: this.password
        });
        console.log('注册结果:', response.data);
        alert('注册成功！');

        if (response.data.state === 300 || response.data.data === 'USERNAME_EXISTS') {
          alert('该用户名已被注册，请尝试其他用户名');
        }
      } catch (error) {
        console.error('注册失败:', error);
        this.errorMessage = '注册失败，请稍后重试';
      }
    },
  }
};
</script>

<style scoped>
.register-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: linear-gradient(to bottom right, #2A4ABF, #3D6BFC); /* 渐变背景 */
  position: relative;
  overflow: hidden;
}

.art-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.register-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 30px;
  background-color: #f0f4f7;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.register-wrapper::before,
.register-wrapper::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #a3d9a3;
  border-radius: 50%;
  opacity: 0.5;
}

.register-wrapper::before {
  top: 20%;
  left: 10%;
}

.register-wrapper::after {
  bottom: 15%;
  right: 15%;
}

h2 {
  margin-bottom: 25px;
  color: rgba(0, 102, 204, 0.61);
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

.terms-group {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.terms-group label {
  display: flex;
  align-items: center;
  color: rgba(0, 102, 204, 0.61);
}

.terms-group input[type="checkbox"] {
  margin-right: 8px;
  width: auto;
}

.terms-group a {
  color: #2e7d32;
  color: rgba(64, 109, 255, 0.47);
}

.terms-group a:hover {
  color: #81c784;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: rgba(0, 102, 204, 0.61);
}

.required {
  color: #d32f2f; /* 红色星号表示必填 */
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #a3d9a3;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: #fff;
  transition: border-color 0.3s;
}

input:focus {
  border-color: #66bb6a;
  outline: none;
}

.register-btn {
  width: 100%;
  padding: 12px;
  background-color: #409EFF;
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.register-btn:hover {
  background-color: #81c784;
}

.error-message {
  color: #d32f2f;
  margin-top: 15px;
  text-align: center;
}
</style>
